<template>
	<div class="wholeContainer">
		<div class="showPart">
            <img :src="userInfo.picUrl">
            <div>
                <div class="nickname">{{userInfo.nickname}}</div>
                <div class="signature">{{userInfo.signature}}</div>
            </div>
		</div>
        <div class="collectContainer">
            <UserPost :userId="userId"/>
        </div>
	</div>
</template>

<script>
import identicon from 'identicon.js'
import UserPost from '../components/UserPart/userPost.vue'
export default {
	name:'UserInfo',
	data(){
		return {
			userInfo:{},
            showEdit:false,
            userId:this.$route.query.userId
		}
	},
    components:{
        UserPost
    },
	mounted(){
		this.$axios({
			method: "get",
            url: `/api/users/${this.userId}`,
            headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
		}).then(res=>{
			// console.log(res)
			if(res.data.code==0){
                this.$message({
                    message: res.data.msg,
                    type: 'warning'
                })
			}else{
                // this.$message({
                //     message: '获取用户信息成功',
                //     type: 'success'
                // })
				this.userInfo = res.data.data
                if(!this.userInfo.picUrl){
                    this.userInfo.picUrl = 'data:image/png;base64,'+new identicon(this.md5(this.userInfo.nickname), 200).toString()
                }
            }
		})
	},
	methods:{
		emptyMsg(){
        this.errMsg = ''
    },
    goEdit(){
      this.showEdit = true
      this.$forceUpdate()
    },
    falseStatus(val){
      // console.log(1)
      this.showEdit = false
      this.$forceUpdate()
    },
	}
}
</script>

<style scoped>
    .collectContainer{
        width: 100%;
        margin-top: 50px;
    }
  .editBtn{
    position: absolute;
    right: 60px;
    top: 20px;
    width: 100px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    border: 2px solid white;
    font-size: 13px;
    cursor: pointer;
  }
  .editBtn:hover{
    border-color: pink;
    color: pink;
  }
  .wholeContainer{
    width: 100.9%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #4b4b4b;
    overflow-y: scroll;
  }
  .showPart{
    width: 100%;
    padding-bottom: 120px;
    text-align: center;
    align-items: center;
    flex-direction: row;
    align-items: center;
    
    padding-top: 50px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../assets/bg.jpg')
  }
  .showPart img{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .nickname{
    color: white;
    margin-top: 30px;
    font-size: 40px;
    font-family: '楷体','Courier New', Courier, monospace;
  }
  .signature{
    color: white;
    width: fit-content;
    margin: 0 auto;
    font-size: 25px;
    margin-top: 35px;
    border-bottom: 1px solid white;
    font-family: '楷体','Courier New', Courier, monospace;
  }
  .infoConatiner{
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .info{
        position: fixed;
        width: 20%;
        height: 40%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: rgba(0,0,0,0.8);
        color: white;
        border-radius: 15px;
        text-align: center;
    }
    .info_title{
        font-size: 2em;
        margin-top: 15%;
        width: 100%;
    }
    .info_msg{
        font-size: 1.4em;
        margin-top: 20%;
        padding-left: 10%;
        padding-right: 10%;
    }
    .info_btn{
        position: absolute;
        bottom:0;
        padding:5% 0;
        text-align: center;
        margin-top: 60%;
        border-radius: 15px;
        width: 100%;
        color: white;
        font-size: 1.2em;
        border-top: 1px solid white;
    }
    .info_btn:hover{
        background-color: rgba(255,255,255,0.2);
    }
</style>
